<!DOCTYPE HTML>
<html>
	<head>
		<!-- <script src="../foundation-4.3.2/js/foundation/foundation-datepicker.js"></script>
		<link rel="stylesheet" href="../foundation-4.3.2/css/foundation-datepicker.css"> -->
		<script>
			$(document).ready(function() {
				$("#bpa").autocomplete({
					source : "../auxiliar/autocomplete_paciente.php"
				});
			})
		</script>
	</head>
	<body>
		<div class="row">
			<div class="large-12 columns">
				<form id="fnc" method="post" action="../formularios_manejadores/ingresar_nvo_cita.php" class="custom" >
					<fieldset>
						<legend>
							Nueva Cita Para Consulta
						</legend>
						<div class="row">
							<!-- Primera fila -->
							<div class="large-8 columns">
								<div class="row">
									<div class="large-6 columns">
										<label>Paciente Solicitante</label>
										<input id='bpa' type="text" maxlength="25" name="paciente_consul" autofocus>
									</div>
									<div class="large-6 columns">
										<label>Motivo de la Cita</label>
										<input type="text" maxlength="25" name="movito_consul">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<!-- Segunda fila -->
							<div class="large-8 columns">
								<div class="row">
									<div class="large-6 columns">
										<label>Fecha solicitud</label>
										<input onclick="calendario(this);" class="datepicker" type="text" class="span2" placeholder="Ej.: 31/12/2013" id="dp1" name="fecha_consul">
									</div>
									<div class="large-6 columns">
										<label>Hora de la consulta</label>
										<input type="text" maxlength="32" name="hora_consul" placeholder="Ej: 1:30 AM">
									</div>
								</div>
							</div>

						</div>
						<br/>

						<div class="row">
							<div class="large-8 columns">
								<input id='agregar' class="small button success" type="button" value="Agregar"  onclick="enviarForm('fnc');">
								<a class="small button alert" href="administrador.php"  value="Cancelar">Cancelar</a>
							</div>
						</div>
			</div>
			</fieldset>
			</form>
			<div id="Modal1" class="reveal-modal">
				<h2>Exito</h2>
				<p class="lead">
					Transaccion realizada.
				</p>
				<p>
					Se ha Guardado la informacion
				</p>
				<a class="close-reveal-modal">&#215;</a>
			</div>
			<div id="Modal7" class="reveal-modal">
				<h2>Error</h2>
				<p class="lead">
					No coincide el paciente o el tipo de examen que desea guardar.
				</p>
				<a class="close-reveal-modal">&#215;</a>
			</div>
			<div id="Modal8" class="reveal-modal">
				<h2>Eror</h2>
				<p class="lead">
					No se encuentra el registro que desea actualizar.
				</p>
				<p>
					Revise que el codigo de lo que quiere actualizar se encuentre en la base.
				</p>
				<a class="close-reveal-modal">&#215;</a>
			</div>

			<div id="Modal9" class="reveal-modal">
				<h2>Error</h2>
				<p class="lead">
					Fallo en la transaccion realizada.
				</p>
				<p>
					Se ha producido un fallo, el codigo que desea guardar ya esta en la base de datos.
				</p>
				<a class="close-reveal-modal">&#215;</a>
			</div>
		</div>
		</div>

		<!-- <script>
			$(function() {
				window.prettyPrint && prettyPrint();
				$('#dp1').fdatepicker({
					format : 'dd-mm-yyyy'
				});
				$('#dp2').fdatepicker({
					closeButton : true
				});
				$('#dp3').fdatepicker();
				$('#dp3').fdatepicker();
				$('#dp-margin').fdatepicker();
				$('#dpYears').fdatepicker();
				$('#dpMonths').fdatepicker();
				var startDate = new Date(2012, 1, 20);
				var endDate = new Date(2012, 1, 25);
				$('#dp4').fdatepicker().on('changeDate', function(ev) {
					if (ev.date.valueOf() > endDate.valueOf()) {
						$('#alert').show().find('strong').text('The start date can not be greater then the end date');
					} else {
						$('#alert').hide();
						startDate = new Date(ev.date);
						$('#startDate').text($('#dp4').data('date'));
					}
					$('#dp4').fdatepicker('hide');
				});
				$('#dp5').fdatepicker().on('changeDate', function(ev) {
					if (ev.date.valueOf() < startDate.valueOf()) {
						$('#alert').show().find('strong').text('The end date can not be less then the start date');
					} else {
						$('#alert').hide();
						endDate = new Date(ev.date);
						$('#endDate').text($('#dp5').data('date'));
					}
					$('#dp5').fdatepicker('hide');
				});
				// implementation of disabled form fields
				var nowTemp = new Date();
				var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
				var checkin = $('#dpd1').fdatepicker({
					onRender : function(date) {
						return date.valueOf() < now.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function(ev) {
					if (ev.date.valueOf() > checkout.date.valueOf()) {
						var newDate = new Date(ev.date)
						newDate.setDate(newDate.getDate() + 1);
						checkout.setValue(newDate);
					}
					checkin.hide();
					$('#dpd2')[0].focus();
				}).data('datepicker');
				var checkout = $('#dpd2').fdatepicker({
					onRender : function(date) {
						return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function(ev) {
					checkout.hide();
				}).data('datepicker');
			});
		</script> -->
	</body>
</html>